<template>
<div class="app-container">
  <!-- v-model绑定组件名字，同时也是当前el-tab-pane当前的选项 -->
  <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="原神最高画质帧率" name="first" :key="'first'">
        <child1  v-if="isChildUpdate1"></child1>
      </el-tab-pane>
      <el-tab-pane label="半小时原神整机平均功耗" name="second" :key="'second'">
        <child2 v-if="isChildUpdate2"></child2>
      </el-tab-pane>
      <el-tab-pane label="和平精英流畅画质+90帧的帧率" name="third" :key="'third'">
        <child3  v-if="isChildUpdate3"></child3>
      </el-tab-pane>
      <el-tab-pane label="和平精英流畅画质+90帧的功耗" name="fourth" :key="'fourth'">
        <child4 v-if="isChildUpdate4"></child4>
      </el-tab-pane>
  </el-tabs>
</div>
</template>

<script>
import tab1 from "@/views/fms/frontGame/tab1";
import tab2 from "@/views/fms/frontGame/tab2";
import tab3 from "@/views/fms/frontGame/tab3";
import tab4 from "@/views/fms/frontGame/tab4";

export default {
  name: "tabGame",
  components: {
    child1: tab1,
    child2: tab2,
    child3: tab3,
    child4: tab4
  },
  data() {
    return {
        // 默认第一个选项卡
        activeName: 'first',
        // 初始化两个变量 isChildUpdate1:true，isChildUpdate2:false；
        // 使用v-if控制child1和child2是否渲染。
        // 每次切换tab选项的时候，触发事件。让当前点击的tab变量设置位true，让当前组件重新渲染。
        // 这时候当你来回切换的时候，通过v-if判断是否重新渲染当前组件
        isChildUpdate1: true,
        isChildUpdate2: false,
        isChildUpdate3: false,
        isChildUpdate4: false
    };
  },

  methods: {
      handleClick (tab) {
        if (tab.name === 'first') {
          this.isChildUpdate1 = true
          this.isChildUpdate2 = false
          this.isChildUpdate3 = false
          this.isChildUpdate4 = false
        } else if (tab.name === 'second') {
          this.isChildUpdate1 = false
          this.isChildUpdate2 = true
          this.isChildUpdate3 = false
          this.isChildUpdate4 = false
        } else if (tab.name === 'third') {
          this.isChildUpdate1 = false
          this.isChildUpdate2 = false
          this.isChildUpdate3 = true
          this.isChildUpdate4 = false
        } else if (tab.name === 'fourth') {
          this.isChildUpdate1 = false
          this.isChildUpdate2 = false
          this.isChildUpdate3 = false
          this.isChildUpdate4 = true
        }
      }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>


